<template>
  <div class="setting-container">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="角色管理" name="first">
          <el-button
            type="primary"
            size="mini"
            @click="addHandle"
          >新增角色</el-button>
          <!-- 表格 -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="150" />
            <el-table-column label="角色" width="280" prop="name" />
            <el-table-column label=" 描述" prop="description" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="success"
                  size="mini"
                  @click="grant(scope.row.id)"
                >分配权限</el-button>
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleEdit(scope.row)"
                >编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-pagination
            :page-size="queryObj.pagesize"
            layout="slot,prev, pager, next,jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">配置管理</el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 对话框 -->
    <el-dialog
      :title="isEdit ? '编辑角色' : '添加角色'"
      :visible.sync="dialogFormVisible"
    >
      <roleDialog
        v-if="dialogFormVisible"
        ref="roleDia"
        :is-edit="isEdit"
        :row="row"
        @success="success"
      />
    </el-dialog>

    <!-- 分配权限 -->
    <el-dialog
      title="分配权限"
      :visible.sync="grantVisible"
    >
      <grant v-if="grantVisible" ref="grant" @success="grantVisible=false" />
    </el-dialog>
  </div>
</template>

<script>
import { getRoles, deleteRole } from '@/api/settings'
import roleDialog from './roleDialog.vue'
import grant from './grant.vue'
export default {
  name: 'Settings',
  components: { roleDialog, grant },
  data() {
    return {
      activeName: 'first',
      tableData: [],
      queryObj: {
        page: 1,
        pagesize: 2
      },
      total: 0,
      dialogFormVisible: false,
      grantVisible: false,
      isEdit: false,
      row: {}
    }
  },
  created() {
    this.loadRoles()
  },
  methods: {
    async loadRoles() {
      const res = await getRoles(this.queryObj)
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleEdit(row) {
      console.log(row, 'row')
      this.dialogFormVisible = true
      this.isEdit = true
      this.row = row
    },
    async handleDelete(id) {
      // console.log(id, 88)
      const res = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      if (res === 'confirm') {
        // 表示点击的是确认按钮
        // alert(id)
        //  4-3 调用api接口函数
        const result = await deleteRole(id)
        // console.log(result, 89)
        if (result.code === 10000) {
          // 4-4 成功后=====刷新页面
          this.loadRoles()
        }
      }
    },

    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.queryObj.page = val
      this.loadRoles()
    },

    //  新增
    addHandle() {
      this.dialogFormVisible = true
      this.isEdit = false
    },

    success() {
      //  关闭对话框 + 刷新页面 + 清空表单数据
      this.dialogFormVisible = false
      this.loadRoles()
      this.$refs.roleDia.cancel()
    },

    // 分配权限
    grant(id) {
      this.grantVisible = true
      this.$nextTick(() => {
        this.$refs.grant.id = id
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.setting-container {
  padding: 20px 30px;
}
</style>
